<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"
    />
    <meta name="referrer" content="no-referrer" />
    <title>播放器</title>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: auto;
        overflow: hidden;
      }
      body {
        display: flex;
      }
      #mse {
        flex: auto;
      }
    </style>
    <link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css" />
    <script type="text/javascript">
      document.addEventListener('ready', () => {
        const resizeObserver = new ResizeObserver(() => {
          document.getElementById('mse').style.height = document.body.clientHeight + 'px';
        });
        resizeObserver.observe(document.body);
      });
    </script>
  </head>
  <body>
    <div id="mse"></div>
    <script src="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js" charset="utf-8"></script>
    <script src="https://unpkg.byted-static.com/xgplayer-hls/3.0.10/dist/index.min.js" charset="utf-8"></script>
    <!-- <script src="//unpkg.byted-static.com/xgplayer-hls.js/3.0.0-alpha.1/dist/index.min.js" charset="utf-8"></script> -->
    <script type="text/javascript">
      let player = new window.Player({
        id: 'mse',
        url: 'https://zy.catni.cn/test/index.m3u8',
        autoplay: true,
        playsinline: true,
        height: window.innerHeight,
        width: window.innerWidth,
        plugins: [window.HlsPlayer],
        // plugins: [window.HlsJsPlugin],
        hls: {
          retryCount: 3, // 重试 3 次，默认值
          retryDelay: 1000, // 每次重试间隔 1 秒，默认值
          loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
          fetchOptions: {
            // 该参数会透传给 fetch，默认值为 undefined
            mode: 'cors',
            header: {
              Referer: 'https://petwz.bj.bcebos.com',
              Origin: 'https://petwz.bj.bcebos.com'
            }
          },
        },
      });
    </script>
  </body>
</html>
